

<template>
    <div class="maskPanel">
        <section class="defaultView" >
            <p class="title_code">
                <span>请输入查询密码</span>
                <i class="icon-close" @click="successChange"></i>
            </p>
        <div class='blue password'>
                <input type="password" v-model='password' @keydown="checkNumber" autofocus="autofocus" ref="Input1" minlength="6"  maxlength='6' class='verification-input' /><span @click.stop="handleSure" class="color" :class="{confirmBtn:finishBtn}">查询</span>  
        </div>

        <p class="tipMessage">

            <span @click="forgetPassword" class="forget">忘记密码?</span>
        </p>
            
        </section>
    </div>

</template>
<script>
import Vue from "vue";
import { Toast} from "mint-ui";
export default {
  data(){
      return{
          password:'',
          phoneNum:'',
          finishBtn:false
      }
  },
  components: {

  },
  computed:{

  },
  props:{
    statusChange:{
        type:Function,
        default:() => {}
    },
    successChange:{
        type:Function,
        default:() => {}
    },

  },
  watch:{
      password:function(val){
          if (val.length > 5) {
              this.finishBtn = true;
              this.handleSure();
          } else {
              this.finishBtn = false;
          }
      }
  },
  mounted:function(){

  },
  methods:{
    changeMove:function(e){
        console.log(e);
        e.stopPropagation();

    },
    close:function(){
        console.log('close');
        this.$emit("update:showMask",false)
    },
    checkNumber(e){

        var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
        if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
                (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
                (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
                (c < 96 || c > 105)) // 96~105 - 小键盘的0~9
                || e.shiftKey) { // Shift键，对应的code为16
           e.preventDefault ? e.preventDefault() : e.returnValue = false; // 阻止事件传播到keypress
        }
        // console.log('keydown');
        // console.log(this.password,'this.password');
        // console.log(this.password.replace(/[^0-9-]+/,''));
        // this.password = this.password.replace(/[^0-9-]+/,'') || '';
    },
    handleSure() {


        this.Axios
            .Post(this.URL.confirmation.url,{password:this.password})
            .then(res => {
                const code = res.data.datas;
                if (code == 10010) {
                    this.dialogVisible = false;
                    this.successChange('1000');
                } else {
                    Toast({
                        message: "密码错误，请重新输入",
                        position: "center",
                        className: "toastStyle",
                        duration: 1000
                    });      
                }
        
            });
        

    },
    forgetPassword:function(){
        this.Axios
            .Post(this.URL.forgetPassword.url)
            .then(res => {
                var massage = res.data.message;
                if (massage.indexOf('验证码成功') > -1) {
                    this.phoneNum = res.data.datas;
                    this.view = 'verificationView'
                    this.statusChange('100001',this.phoneNum)
                } else {
            
                }

            });      
    }
  }
}
</script>
<style lang="less" scoped>
    .maskPanel{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: #7E7E7E;
        z-index:1000;
    }
  .defaultView {
    overflow: hidden;
    background-color:#fff;
    position: absolute;;
    bottom:0px;
    margin:auto auto;
    top:0px;
    height:4rem;
    width:90%;
    left:0;
    right:0;
    border-radius: 0.08rem;
    text-align:center;
    .title_code{
        height: 1rem;
        line-height: 1rem;
        position: relative;
        margin-bottom:0.8rem;
    }
    .title_code i{
        position: absolute;
        right:0.3rem;
        top:0.34rem;
        font-size:0.32rem;
        color: rgb(148, 142, 142);
    }
    .tipMessage {
      text-align: right;
      margin: 15px 0;
      overflow: hidden;
    }
    .password {
      text-align: left;
      padding: 0 10%;
      height:0.84rem;
      line-height:0.84rem;
      input{
        outline: none; 
        border-right:none;
        border-radius:0.1rem;
        border:1px solid #999;
        height:0.8rem; 
        padding-left:0.1rem;
        padding-top:0;
        padding-bottom:0;
        width:78%;
        vertical-align: top;
      }
      span{
          display:inline-block;
          height:0.84rem;
          line-height:0.84rem;
          margin-left:-0.12rem;
          text-align:center;
          width:19%;
          color:#fff;
          border-top-right-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
      }
      .color{
          background-color:#D2D2D3;
      }
      span.confirmBtn{
          background-color:#027de5;
      }
    }

    .forget {
      color: #027de5;
      cursor: pointer;
      text-align: right;
      float: right;
      margin-right:10%;
    }
  }
</style>

             
             
             
             
